<template>
	<div>
		<van-button @click="isShow = !isShow">{{ isShow ? '隐藏' : '显示' }}</van-button>
		<van-button @click="addData()">增加数据</van-button>
		<t-chart
			ref="chartRef"
			v-show="isShow"
			:options="options"
			style="width: 100%; height: 500px"
			@click="click"
			@dblclick="addData()"
			@mousedown="mousedown"
			@mousemove="mousemove"
			@mouseover="mouseover"
			@mouseout="mouseout"
			@globalout="globalout"
			@contextmenu="contextmenu"
			@chart="chart"
		/>
	</div>
</template>
<script setup lang="ts">
	import TChart from '../components/Echarts/index.vue';
	const options = ref({
		xAxis: {
			type: 'category',
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
		},
		yAxis: {
			type: 'value',
		},
		series: [
			{
				data: [150, 230, 224, 218, 135, 147, 260],
				type: 'line',
			},
		],
	});

	// const options = ref({});

	const isShow = ref(true);
	const addData = () => {
		options.value.xAxis.data.push('test' + Math.random().toString(36).substring(2, 8));
		options.value.series[0].data.push(Math.random() * 200);
	};
	const click = (e) => {
		console.log('click-----', e);
	};
	const mousedown = (_e) => {
		// console.log('mousedown-----', e);
	};
	const mousemove = (_e) => {
		// console.log('mousemove-----', e);
	};
	const mouseover = (_e) => {
		// console.log('mouseover-----', e);
	};
	const mouseout = (_e) => {
		// console.log('mouseout-----', e);
	};
	const globalout = (_e) => {
		// console.log('globalout-----', e);
	};
	const contextmenu = (_e) => {
		// console.log('contextmenu-----', e);
	};

	const chartRef = ref(null);
	const chart = (dom) => {
		chartRef.value = dom;
	};
</script>
